<template>
	<view>
		<u-verification-code :seconds="seconds" ref="uCode" change-text="X" @end="reLoad" @change="codeChange"></u-verification-code>
		<text v-if="!wait" class="u-letter-spacing-5 text-color u-font-28" @click="getCode">获取验证码</text>
		<text v-else style="color: #999999;">{{tips}}s后重新获取</text>
	</view>
</template>

<script>
	import { sendSms } from '@/config/idsApi.js'
	export default {
		props: {
			isIds: {
				type: Boolean,
				default: true
			},
			seconds: {
				type: Number,
				default: 60
			},
			mobile: {
				type: String,
				default: ''
				// required: true
			},
			isValid: {
				type: Object,
				default: {
					isSend: false,
					msg: ''
				}
			}
		},
		data() {
			return {
				tips: '',
				wait: false
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (!this.isValid.isSend) {
					return uni.showToast({
						title: this.isValid.msg,
						icon: 'none'
					})
				}
				
				uni.showLoading({
					title: '正在获取验证码'
				})
				if (this.isIds) {
					const code = await sendSms({ phoneNumber: this.mobile })
					if (!code) {
						return this.reLoad()
					}
				} else {
					const code = await this.$http.post('api/Sms/SendSmsCode', { phoneNumber: this.mobile })
					if (!code) {
						return this.reLoad()
					}
				}
				this.wait = true
				this.$u.toast('验证码已发送');
				uni.hideLoading();
				this.$refs.uCode.start();
				// console.log(code)
				// setTimeout(() => {
				// 	uni.hideLoading();
				// 	// 这里此提示会被this.start()方法中的提示覆盖
				// 	this.$u.toast('验证码已发送');
				// 	// 通知验证码组件内部开始倒计时
				// 	this.$refs.uCode.start();
				// }, 1000);
			},
			reLoad() {
				this.wait = false
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
